<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option" ref="table"/>
    <dialog-columns-form
      v-model="formData"
      width="900px"
      title="上新"
      :visible.sync="chosenDialogShowed"
      :columns="chosenColumns"
      @submit="handleSubmitChosen"
    />
    <dialog-columns-form
      v-model="formData"
      width="900px"
      title="取标题"
      :visible.sync="titleDialogShowed"
      :columns="titleColumns"
      @submit="handleSubmitTitle"
    />
    <dialog-columns-form
      v-model="formData"
      width="900px"
      title="修改标题"
      :visible.sync="modifyTitleDialogShowed"
      :columns="modifyTitleColumns"
      @submit="handleSubmitModifyTitle"
    />
    <el-dialog :visible.sync="skuEditShowed" title="sku编辑" width="800px">
      <sku-editor v-model="skuContent"/>
    </el-dialog>
    <el-dialog :visible.sync="sameSpuCountDialogShowed" title="同款">
      <c-u-r-d-table :option="sameSpuOption" ref="table2"/>
    </el-dialog>
  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import YesNoEnum from '@/infra/constant/YesNoEnum'
import { newProductRegisterApi } from '@/feature/pdt/infra/api/newProductRegisterApi'
import CURDTable from '@/framework/components/table/CURDTable'
import { adminApi } from '@/feature/mgr/infra/api/adminApi'
import DialogColumnsForm from '@/framework/components/form/DialogColumnsForm'
import { dicApi } from '@/feature/sys/infra/api/dicApi'
import SysDicTypeEnum from '@/feature/sys/infra/constants/SysDicTypeEnum'
import DateType from '@/framework/constant/DateType'
import { storeApi } from '@/feature/mct/infra/api/storeApi'
import AdminTypeEnum from '@/feature/mgr/infra/constants/AdminTypeEnum'
import NewStatusEnum from '@/feature/pdt/infra/constants/NewStatusEnum'
import TitleStatusEnum from '@/feature/pdt/infra/constants/TitleStatusEnum'
import DateUtil from '@/framework/infra/util/DateUtil'
import SkuEditor from '@/components/editor/SkuEditor'
import moment from 'moment'
import { measureApi } from '@/feature/pdt/infra/api/measureApi'
import { mapGetters } from 'vuex'

export default {
  components: { SkuEditor, DialogColumnsForm, CURDTable },
  data() {
    return {
      sameSpuOption: {
        disableDefaultSearchParam: true,
        columns: [
          {
            label: '店铺',
            prop: 'storeId',
            searchCached: false,
            searchable: true,
            span: 6,
            width: 120,
            type: ColumnType.SELECT,
            required: true,
            // onChange: ({ value, formData }) => {
            //   if (value) {
            //     newProductRegisterApi.lastProductCode(value).then(data => {
            //       formData.productCode = data
            //     })
            //   }
            // },
            options: storeApi.options()
          },
          {
            label: '系统ID',
            width: 60,
            hiddenInForm: true,
            span: 6,
            searchable: true,
            prop: 'id'
          }, {
            label: 'ID',
            width: 120,
            hiddenInForm: true,
            span: 6,
            searchable: true,
            required: true,
            prop: 'productNo'
          },
          // {
          //   label: '同款数量',
          //   width: 70,
          //   hiddenInForm: true,
          //   span: 6,
          //   prop: 'sameSpuCount'
          // },
          {
            label: '60个字符初始标题',
            span: 6,
            hiddenInForm: true,
            width: 300,
            prop: 'titleOrigin60'
          },
          {
            label: '60个字符修改后标题',
            span: 6,
            width: 300,
            hiddenInForm: true,
            prop: 'titleAfter60'
          },
          {
            label: '主图',
            required: false,
            width: 100,
            span: 6,
            type: ColumnType.IMAGE,
            limit: 5,
            prop: 'mainImg'
          },
          {
            label: 'Sku',
            required: false,
            span: 6,
            width: 300,
            // onEditorShow: (formData) => {
            //   this.skuEditShowed = true
            //   this.skuContent = formData.sku
            // },
            // editor: true,
            // hiddenInForm: true,
            type: ColumnType.TEXTAREA,
            prop: 'sku'
          },
          {
            label: '价格',
            span: 6,
            required: false,
            type: ColumnType.TEXTAREA,
            // hiddenInForm: true,
            prop: 'price'
          },
          {
            label: '编码',
            width: 200,
            type: ColumnType.TEXTAREA,
            // hiddenInForm: true,
            required: false,
            span: 6,
            searchable: true,
            prop: 'productCode'
          },
          {
            label: '类目',
            type: ColumnType.SELECT,
            span: 6,
            options: dicApi.allOptions(SysDicTypeEnum.CATEGORY.id),
            // hiddenInForm: true,
            required: false,
            prop: 'categories'
          },
          {
            label: '尺码',
            type: ColumnType.RICH_TEXTAREA,
            width: 300,
            required: false,
            defaultValue: '衣长 袖长 胸围 肩宽 <br/>裤长(裙长) 腰围',
            span: 6,
            // hiddenInForm: true,
            prop: 'measurement'
          },
          {
            label: '备注',
            type: ColumnType.TEXTAREA,
            width: 300,
            span: 6,
            // hiddenInForm: true,
            required: false,
            prop: 'remark'
          },
          {
            label: '是否翻转',
            required: false,
            width: 100,
            span: 6,
            defaultValue: 1,
            searchable: true,
            prop: 'overturnFlag',
            type: ColumnType.RADIO,
            options: YesNoEnum
          },
          {
            label: '选款师',
            prop: 'styleSelectorId',
            searchable: true,
            type: ColumnType.SELECT,
            span: 6,
            width: 100,
            required: true,
            options: adminApi.listAllOfType(AdminTypeEnum.STYLE_SELECTOR.id).then(data => {
              const posIdx = data.findIndex(el => el.label.includes('***'))
              if (posIdx > -1) {
                const prefix = data[posIdx]
                data.splice(posIdx, 1)
                data.unshift(prefix)
              }
              return data
            })
            // hiddenInForm: true
          },
          {
            label: '风格',
            required: false,
            span: 6,
            searchable: true,
            options: dicApi.allOptions(SysDicTypeEnum.STYLE.id),
            type: ColumnType.SELECT,
            width: 100,
            prop: 'style'
          },
          {
            label: '渠道',
            required: false,
            span: 6,
            width: 100,
            searchable: true,
            type: ColumnType.SELECT,
            options: dicApi.allOptions(SysDicTypeEnum.CHANNEL.id),
            prop: 'channel'
          },
          {
            label: '博主ID',
            searchable: true,
            required: false,
            width: 100,
            span: 6,
            prop: 'bloggerNo'
          }, {
            label: '博主名称',
            searchable: true,
            required: false,
            width: 100,
            span: 6,
            prop: 'bloggerName'
          },
          {
            label: '美工是否已领取',
            span: 6,
            hiddenInForm: true,
            width: 140,
            type: ColumnType.SELECT,
            searchable: true,
            options: YesNoEnum,
            prop: 'artHandled'
          },
          {
            label: '是否已领取视频',
            span: 6,
            hiddenInForm: true,
            width: 140,
            type: ColumnType.SELECT,
            searchable: true,
            options: YesNoEnum,
            prop: 'videoPickFlag'
          },
          {
            label: '视频领取时间',
            span: 6,
            hiddenInForm: true,
            width: 140,
            type: ColumnType.DATETIME,
            prop: 'videoPickTime'
          }, {
            label: '视频领取人',
            span: 6,
            searchable: true,
            options: adminApi.listAll(),
            hiddenInForm: true,
            width: 140,
            type: ColumnType.SELECT,
            prop: 'videoPickUserId'
          },
          // {
          //   label: '状态',
          //   hiddenInForm: true,
          //   width: 100,
          //   type: ColumnType.SELECT,
          //   searchable: true,
          //   options: PdtNewProductRegisterStatusEnum,
          //   prop: 'status'
          // },
          //
          {
            label: '上新状态',
            hiddenInForm: true,
            span: 6,
            width: 100,
            type: ColumnType.SELECT,
            searchable: true,
            options: NewStatusEnum,
            prop: 'newStatus'
          }, {
            label: '是否视频款',
            required: false,
            width: 100,
            span: 6,
            defaultValue: 1,
            searchable: true,
            prop: 'videoFlag',
            type: ColumnType.RADIO,
            options: YesNoEnum
          }, {
            label: '原链接1',
            span: 6,
            // required: true,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink'
          }, {
            label: '链接2',
            span: 6,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink2'
          }, {
            label: '链接3',
            span: 6,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink3'
          }, {
            label: '链接4',
            span: 6,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink4'
          }, {
            label: '链接5',
            span: 6,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink5'
          },
          {
            label: '标题状态',
            hiddenInForm: true,
            width: 100,
            type: ColumnType.SELECT,
            searchable: true,
            span: 6,
            options: TitleStatusEnum,
            prop: 'titleStatus'
          },
          {
            label: '运营助理',
            prop: 'opAssistantId',
            hiddenInForm: true,
            searchable: true,
            width: 100,
            span: 6,
            options: adminApi.listAll(),
            type: ColumnType.SELECT
          },

          {
            label: '30个字符初始标题',
            hiddenInForm: true,
            width: 240,
            span: 6,
            prop: 'titleOrigin30'
          },

          {
            label: '40个字符初始标题',
            hiddenInForm: true,
            span: 6,
            width: 300,
            prop: 'titleOrigin40'
          },
          // {
          //   label: '20个字符初始标题',
          //   hiddenInForm: true,
          //   span: 6,
          //   prop: 'titleOrigin20'
          // },
          {
            label: '修改标题人',
            hiddenInForm: true,
            span: 6,
            width: 100,
            type: ColumnType.SELECT,
            searchable: true,
            options: adminApi.listAll(),
            prop: 'titleModifierId'
          },
          {
            label: '30个字符修改后标题',
            span: 6,
            hiddenInForm: true,
            prop: 'titleAfter30'
          },

          {
            label: '40个字符修改后标题',
            hiddenInForm: true,
            prop: 'titleAfter40'
          },
          // {
          //   label: '20个字符修改后标题',
          //   hiddenInForm: true,
          //   prop: 'titleAfter20'
          // },
          // {
          //   label: '博主日期',
          //   type: ColumnType.DATE,
          //   span: 6,
          //   width: 120,
          //   searchable: true,
          //   sortable: 'custom',
          //   // hiddenInForm: true,
          //   searchOption: {
          //     options: {
          //       type: DateType.DATERANGE
          //     }
          //   },
          //   prop: 'bloggerDate'
          // },
          {
            label: '美工日期',
            type: ColumnType.DATE,
            width: 120,
            searchable: true,
            sortable: 'custom',
            hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'artDate'
          }, {
            label: '上新日期',
            type: ColumnType.DATE,
            width: 120,
            span: 6,
            searchable: true,
            sortable: 'custom',
            // hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'newDate'
          }, {
            label: '取标题日期',
            type: ColumnType.DATE,
            width: 120,
            searchable: true,
            sortable: 'custom',
            hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'titleDate'
          }, {
            label: '修改标题日期',
            type: ColumnType.DATE,
            width: 130,
            searchable: true,
            sortable: 'custom',
            hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'titleModifyDate'
          },

          {
            label: '创建人',
            type: ColumnType.SELECT,
            searchable: true,
            width: 100,
            options: adminApi.listAll(),
            hiddenInForm: true,
            prop: 'creatorId'
          },
          {
            label: '美工',
            hiddenInForm: true,
            width: 100,
            type: ColumnType.SELECT,
            searchable: true,
            span: 6,
            options: adminApi.listAll(),
            prop: 'artDesignerId'
          },
          {
            label: '美工领取时间',
            type: ColumnType.DATETIME,
            sortable: true,
            searchable: true,
            hiddenInForm: true,
            // searchOption: {
            //   options: {
            //     type: DateType.DATERANGE
            //   }
            // },
            prop: 'artTime'
          },
          {
            label: '链接修改时间',
            type: ColumnType.DATETIME,
            searchable: true,
            // sortable: true,
            sortable: 'custom',
            defaultSort: 'asc',
            hiddenInForm: true,
            // searchOption: {
            //   options: {
            //     type: DateType.DATERANGE
            //   }
            // },
            prop: 'linkGmtModified'
          },

          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            searchable: true,
            sortable: 'custom',
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ],
        showSelection: false,
        tableHeight: 400,
        requestApi: newProductRegisterApi,
        groupId: 2,
        autLoad: false,
        initListParams: () => {
          return {
            tbLinkUk: this.currentRow.tbLinkUk
          }
        }
      },
      chosenDialogShowed: false,
      modifyTitleDialogShowed: false,
      sameSpuCountDialogShowed: false,
      titleDialogShowed: false,
      skuEditShowed: false,
      formData: {},
      currentRow: null,
      skuContent: '',
      chosenColumns: [
        {
          label: 'ID',
          width: 120,
          required: true,
          prop: 'productNo'
        }
        // {
        //   label: '上新日期',
        //   width: 120,
        //   prop: 'newDate',
        //   type: ColumnType.DATE
        // }
        // {
        //   label: '编码',
        //   required: false,
        //   searchable: true,
        //   prop: 'productCode'
        // },
        // {
        //   label: '备注',
        //   type: ColumnType.TEXTAREA,
        //   required: false,
        //   prop: 'remark'
        // },
        // {
        //   label: '60个字符初始标题',
        //   required: true,
        //   type: ColumnType.TEXTAREA,
        //   prop: 'titleOrigin60'
        // }
      ],
      titleColumns: [
        {
          label: '原链接1',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink'
        }, {
          label: '链接2',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink2'
        }, {
          label: '链接3',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink3'
        }, {
          label: '链接4',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink4'
        }, {
          label: '链接5',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink5'
        },
        {
          label: '主图',
          required: false,
          width: 100,
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          plainType: ColumnType.IMAGE,
          prop: 'mainImg'
        },
        {
          label: '类目',
          type: ColumnType.PLAIN_TEXT,
          span: 12,
          // hiddenInForm: true,
          required: false,
          prop: 'categories'
        },
        {
          label: 'Sku',
          required: false,
          width: 100,
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          prop: 'sku'
        }, {
          label: '备注',
          required: false,
          width: 100,
          span: 24,
          type: ColumnType.PLAIN_TEXT,
          prop: 'remark'
        },
        {
          label: '60个字符初始标题',
          required: true,
          span: 24,
          type: ColumnType.NB_TEXTAREA,
          renderOptions: {
            showWordLimit: true,
            maxlength: 60
          },
          prop: 'titleOrigin60'
        },
        {
          label: '30个字符初始标题',
          type: ColumnType.NB_TEXTAREA,
          span: 24,
          renderOptions: {
            showWordLimit: true,
            maxlength: 30
          },
          required: true,
          prop: 'titleOrigin30'
        },

        {
          label: '40个字符初始标题',
          span: 24,
          type: ColumnType.NB_TEXTAREA,
          required: true,
          renderOptions: {
            showWordLimit: true,
            maxlength: 40
          },
          prop: 'titleOrigin40'
        }
        // {
        //   label: '20个字符初始标题',
        //   required: true,
        //   span: 24,
        //   type: ColumnType.NB_TEXTAREA,
        //   renderOptions: {
        //     showWordLimit: true,
        //     maxlength: 20
        //   },
        //   prop: 'titleOrigin20'
        // }
      ],
      modifyTitleColumns: [
        {
          label: '原链接1',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink'
        }, {
          label: '链接2',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink2'
        }, {
          label: '链接3',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink3'
        }, {
          label: '链接4',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink4'
        }, {
          label: '链接5',
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          viewAsLink: true,
          prop: 'tbLink5'
        },
        {
          label: '主图',
          required: false,
          width: 100,
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          plainType: ColumnType.IMAGE,
          prop: 'mainImg'
        },
        {
          label: '类目',
          type: ColumnType.PLAIN_TEXT,
          span: 12,
          // hiddenInForm: true,
          required: false,
          prop: 'categories'
        },
        {
          label: 'Sku',
          required: false,
          width: 100,
          span: 12,
          type: ColumnType.PLAIN_TEXT,
          prop: 'sku'
        }, {
          label: '备注',
          required: false,
          width: 100,
          span: 24,
          type: ColumnType.PLAIN_TEXT,
          prop: 'remark'
        },
        {
          label: '60个字符初始标题',
          type: ColumnType.PLAIN_TEXT,
          renderOptions: {
            showWordLimit: true,
            maxlength: 60
          },
          prop: 'titleOrigin60'
        },
        {
          label: '60个字符修改后标题',
          type: ColumnType.NB_TEXTAREA,
          renderOptions: {
            showWordLimit: true,
            maxlength: 60
          },
          prop: 'titleAfter60'
        },
        {
          label: '30个字符初始标题',
          type: ColumnType.PLAIN_TEXT,
          renderOptions: {
            showWordLimit: true,
            maxlength: 30
          },
          prop: 'titleOrigin30'
        },
        {
          label: '30个字符修改后标题',
          type: ColumnType.NB_TEXTAREA,
          renderOptions: {
            showWordLimit: true,
            maxlength: 30
          },
          prop: 'titleAfter30'
        },
        // {
        //   label: '20个字符初始标题',
        //   type: ColumnType.PLAIN_TEXT,
        //   renderOptions: {
        //     showWordLimit: true,
        //     maxlength: 20
        //   },
        //   prop: 'titleOrigin20'
        // },
        // {
        //   label: '20个字符修改后标题',
        //   type: ColumnType.NB_TEXTAREA,
        //   renderOptions: {
        //     showWordLimit: true,
        //     maxlength: 20
        //   },
        //   prop: 'titleAfter20'
        // },
        {
          label: '40个字符初始标题',
          type: ColumnType.PLAIN_TEXT,
          renderOptions: {
            showWordLimit: true,
            maxlength: 40
          },
          prop: 'titleOrigin40'
        },
        {
          label: '40个字符修改后标题',
          renderOptions: {
            showWordLimit: true,
            maxlength: 40
          },
          type: ColumnType.NB_TEXTAREA,
          prop: 'titleAfter40'
        }

      ],
      option: {
        initFormParams: () => {
          return {
            tomorrowMode: this.tomorrowMode
          }
        },
        tab: {
          options: [{
            value: 0,
            text: '今日模式'
          }, {
            value: 1,
            text: '明日模式'
          }],
          defaultValue: 0,
          onChange: (v) => {
            this.tomorrowMode = v
            if (v === 0) {
              this.$refs.table.setFilterParam('newDate', [DateUtil.currentDate(), DateUtil.currentDate()]).reloadTable()
            } else if (v === 1) {
              const date = moment().add(1, 'day').format('YYYY-MM-DD')
              this.$refs.table.setFilterParam('newDate', [date, date]).reloadTable()
            }
          }
        },
        rowWarnFilter({ row, index }) {
          return !row.tbLink
        },
        // beforeConfirmSubmit: (msg, args) => {
        //   if (args.remark.trim()) {
        //     args.remark += '\n'
        //   }
        //   args.remark += msg.replace(',确定继续上新吗？', '')
        // },
        autoLoad: false,
        formLabelWidth: '100px',
        dialogWidth: '1440px',
        opWidth: 300,
        requestApi: newProductRegisterApi,
        showSelection: true,
        interceptor: {
          beforeCreate: (formData) => {
            if (formData.storeId) {
              newProductRegisterApi.lastProductCode(formData.storeId).then(data => {
                if (data) {
                  // const prev = formData._productCode || ''
                  // if (formData.productCode) {
                  //   formData.productCode = formData.productCode.replaceAll(prev + '--', data + '--')
                  // }
                  formData._productCode = data
                  formData.productCode = data + '--'
                }
              })
            }
          },
          beforeEdit: (formData) => {
            console.log(formData)
            debugger
            if (formData.storeId && !formData.productCode) {
              newProductRegisterApi.lastProductCode(formData.storeId).then(data => {
                if (data) {
                  // const prev = formData._productCode || ''
                  // if (formData.productCode) {
                  //   formData.productCode = formData.productCode.replaceAll(prev + '--', data + '--')
                  // }
                  formData._productCode = data
                  formData.productCode = data + '--'
                }
              })
            } else if (formData.productCode) {
              const v = formData.productCode.match(/\d+/)
              formData._productCode = v ? v[0] : ''
            }
          }
        },
        columns: [
          {
            label: '店铺',
            prop: 'storeId',
            searchable: true,
            // 搜索缓存
            searchCached: true,
            span: 6,
            width: 120,
            type: ColumnType.SELECT,
            required: true,
            onChange: ({ value, formData }) => {
              debugger
              // if (formData.id && formData.productCode) {
              //   return
              // }
              if (value) {
                newProductRegisterApi.lastProductCode(value).then(data => {
                  if (data) {
                    const prev = formData._productCode || ''
                    if (formData.productCode) {
                      formData.productCode = formData.productCode.replaceAll(prev + '--', data + '--')
                    }
                    formData._productCode = data
                    formData.productCode = data + '--'
                  }
                })
              }
            },
            options: storeApi.options()
          },
          {
            label: '系统ID',
            width: 60,
            hiddenInForm: true,
            span: 6,
            searchable: true,
            prop: 'id'
          }, {
            label: 'ID',
            width: 120,
            hiddenInForm: true,
            span: 6,
            searchOption: {
              options: {
                type: ColumnType.TEXTAREA
              }
            },
            searchable: true,
            required: true,
            prop: 'productNo'
          }, {
            label: '同款数量',
            width: 70,
            hiddenInForm: true,
            span: 6,
            prop: 'sameSpuCount'
          },
          {
            label: '60个字符初始标题',
            span: 6,
            hiddenInForm: true,
            width: 300,
            prop: 'titleOrigin60'
          },
          {
            label: '60个字符修改后标题',
            span: 6,
            width: 300,
            hiddenInForm: true,
            prop: 'titleAfter60'
          },
          {
            label: '主图',
            required: false,
            width: 100,
            span: 6,
            type: ColumnType.IMAGE,
            limit: 5,
            prop: 'mainImg'
          },
          {
            label: 'Sku',
            required: false,
            span: 6,
            width: 300,
            onChange: ({ value, formData }) => {
              debugger
              if (formData.sku.trim()) {
                const len = formData.sku.trim().split(/\s+/).length
                const matches = formData.productCode.trim().match(/\d+--/ig)
                let matchLen = 0
                if (matches && matches.length) {
                  matchLen = matches.length
                }
                if (len - matchLen > 0) {
                  for (let i = 0; i < len - matchLen; i++) {
                    if (formData.productCode) {
                      formData.productCode += '\n'
                    }
                    formData.productCode += (formData._productCode || '') + '--'
                  }
                } else if (len - matchLen < 0) {
                  formData.productCode = formData.productCode.trim().split('\n').slice(0, len).join('\n')
                }
              } else {
                // formData.productCode = ''
              }

            },
            // onEditorShow: (formData) => {
            //   this.skuEditShowed = true
            //   this.skuContent = formData.sku
            // },
            // editor: true,
            // hiddenInForm: true,
            type: ColumnType.TEXTAREA,
            prop: 'sku'
          },
          {
            label: '价格',
            span: 6,
            required: false,
            type: ColumnType.TEXTAREA,
            // hiddenInForm: true,
            prop: 'price'
          }, {
            label: '一口价',
            span: 6,
            required: false,
            type: ColumnType.TEXTAREA,
            // hiddenInForm: true,
            prop: 'onePrice'
          },
          {
            label: '编码',
            width: 200,
            searchOption: {
              options: {
                type: ColumnType.TEXTAREA
              }
            },
            type: ColumnType.TEXTAREA,
            // hiddenInForm: true,
            required: false,
            span: 6,
            searchable: true,
            prop: 'productCode'
          },
          {
            label: '类目',
            type: ColumnType.SELECT,
            span: 6,
            searchable: true,
            options: dicApi.allOptions(SysDicTypeEnum.CATEGORY.id),
            // hiddenInForm: true,
            required: false,
            prop: 'categories'
          },
          {
            label: '尺码',
            type: ColumnType.RICH_TEXTAREA,
            width: 300,
            required: false,
            defaultValue: '衣长 袖长 胸围 肩宽 <br/>裤长(裙长) 腰围',
            span: 6,
            tool: {
              type: ColumnType.SELECT,
              options: measureApi.listAll()
            },
            // hiddenInForm: true,
            prop: 'measurement'
          },
          {
            label: '备注',
            type: ColumnType.TEXTAREA,
            width: 300,
            span: 6,
            // hiddenInForm: true,
            required: false,
            prop: 'remark'
          },
          {
            label: '是否翻转',
            required: false,
            width: 100,
            span: 6,
            defaultValue: 1,
            searchable: true,
            prop: 'overturnFlag',
            type: ColumnType.RADIO,
            options: YesNoEnum
          },
          {
            label: '选款师',
            prop: 'styleSelectorId',
            searchable: true,
            type: ColumnType.SELECT,
            span: 6,
            width: 100,
            required: true,
            options: adminApi.listAllOfType(AdminTypeEnum.STYLE_SELECTOR.id).then(data => {
              const posIdx = data.findIndex(el => el.label.includes('***'))
              if (posIdx > -1) {
                const prefix = data[posIdx]
                data.splice(posIdx, 1)
                data.unshift(prefix)
              }
              return data
            })
            // hiddenInForm: true
          },
          {
            label: '风格',
            required: false,
            span: 6,
            searchable: true,
            options: dicApi.allOptions(SysDicTypeEnum.STYLE.id),
            type: ColumnType.SELECT,
            width: 100,
            prop: 'style'
          },
          {
            label: '渠道',
            required: false,
            span: 6,
            width: 100,
            searchable: true,
            type: ColumnType.SELECT,
            options: dicApi.allOptions(SysDicTypeEnum.CHANNEL.id),
            prop: 'channel'
          },
          {
            label: '博主ID',
            searchable: true,
            required: false,
            width: 100,
            span: 6,
            prop: 'bloggerNo'
          },
          {
            label: '博主名称',
            searchable: true,
            required: false,
            width: 100,
            span: 6,
            prop: 'bloggerName'
          },
          {
            label: '美工是否已领取',
            span: 6,
            hiddenInForm: true,
            width: 140,
            type: ColumnType.SELECT,
            searchable: true,
            options: YesNoEnum,
            prop: 'artHandled'
          }, {
            label: '是否已领取视频',
            span: 6,
            hiddenInForm: true,
            width: 140,
            type: ColumnType.SELECT,
            searchable: true,
            options: YesNoEnum,
            prop: 'videoPickFlag'
          },
          {
            label: '视频领取时间',
            span: 6,
            hiddenInForm: true,
            width: 140,
            type: ColumnType.DATETIME,
            prop: 'videoPickTime'
          }, {
            label: '视频领取人',
            span: 6,
            options: adminApi.listAll(),
            searchable: true,
            hiddenInForm: true,
            width: 140,
            type: ColumnType.SELECT,
            prop: 'videoPickUserId'
          },
          {
            label: '美工',
            hiddenInForm: true,
            width: 100,
            type: ColumnType.SELECT,
            searchable: true,
            span: 6,
            options: adminApi.listAll(),
            prop: 'artDesignerId'
          },
          // {
          //   label: '状态',
          //   hiddenInForm: true,
          //   width: 100,
          //   type: ColumnType.SELECT,
          //   searchable: true,
          //   options: PdtNewProductRegisterStatusEnum,
          //   prop: 'status'
          // },
          //
          {
            label: '上新状态',
            hiddenInForm: true,
            span: 6,
            width: 100,
            type: ColumnType.SELECT,
            searchable: true,
            options: NewStatusEnum,
            prop: 'newStatus'
          }, {
            label: '是否视频款',
            required: false,
            width: 100,
            span: 6,
            defaultValue: 1,
            searchable: true,
            prop: 'videoFlag',
            type: ColumnType.RADIO,
            options: YesNoEnum
          }, {
            label: '原链接1',
            span: 6,
            // required: true,
            searchable: true,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink'
          }, {
            label: '链接2',
            span: 6,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink2'
          }, {
            label: '链接3',
            span: 6,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink3'
          }, {
            label: '链接4',
            span: 6,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink4'
          }, {
            label: '链接5',
            span: 6,
            type: ColumnType.TEXTAREA,
            viewAsLink: true,
            prop: 'tbLink5'
          },
          {
            label: '标题状态',
            hiddenInForm: true,
            width: 100,
            type: ColumnType.SELECT,
            searchable: true,
            span: 6,
            options: TitleStatusEnum,
            prop: 'titleStatus'
          },
          {
            label: '运营助理',
            prop: 'opAssistantId',
            hiddenInForm: true,
            searchable: true,
            width: 100,
            span: 6,
            options: adminApi.listAll(),
            type: ColumnType.SELECT
          },

          {
            label: '30个字符初始标题',
            hiddenInForm: true,
            width: 240,
            span: 6,
            prop: 'titleOrigin30'
          },

          {
            label: '40个字符初始标题',
            hiddenInForm: true,
            span: 6,
            width: 300,
            prop: 'titleOrigin40'
          },
          // {
          //   label: '20个字符初始标题',
          //   hiddenInForm: true,
          //   span: 6,
          //   prop: 'titleOrigin20'
          // },
          {
            label: '修改标题人',
            hiddenInForm: true,
            span: 6,
            width: 100,
            type: ColumnType.SELECT,
            searchable: true,
            options: adminApi.listAll(),
            prop: 'titleModifierId'
          },
          {
            label: '30个字符修改后标题',
            span: 6,
            hiddenInForm: true,
            prop: 'titleAfter30'
          },

          {
            label: '40个字符修改后标题',
            hiddenInForm: true,
            prop: 'titleAfter40'
          },
          // {
          //   label: '20个字符修改后标题',
          //   hiddenInForm: true,
          //   prop: 'titleAfter20'
          // },
          // {
          //   label: '博主日期',
          //   type: ColumnType.DATE,
          //   span: 6,
          //   width: 120,
          //   searchable: true,
          //   sortable: 'custom',
          //   // hiddenInForm: true,
          //   searchOption: {
          //     options: {
          //       type: DateType.DATERANGE
          //     }
          //   },
          //   prop: 'bloggerDate'
          // },
          {
            label: '美工日期',
            type: ColumnType.DATE,
            width: 120,
            searchable: true,
            sortable: 'custom',
            hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'artDate'
          }, {
            label: '上新日期',
            type: ColumnType.DATE,
            width: 120,
            span: 6,
            searchable: true,
            sortable: 'custom',
            // hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE,
                defaultValue: [DateUtil.currentDate(), DateUtil.currentDate()]
              }
            },
            prop: 'newDate'
          }, {
            label: '取标题日期',
            type: ColumnType.DATE,
            width: 120,
            searchable: true,
            sortable: 'custom',
            hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'titleDate'
          }, {
            label: '修改标题日期',
            type: ColumnType.DATE,
            width: 130,
            searchable: true,
            sortable: 'custom',
            hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'titleModifyDate'
          },
          {
            label: '创建人',
            type: ColumnType.SELECT,
            searchable: true,
            width: 100,
            options: adminApi.listAll(),
            hiddenInForm: true,
            prop: 'creatorId'
          },
          {
            label: '美工领取时间',
            type: ColumnType.DATETIME,
            searchable: true,
            sortable: true,
            hiddenInForm: true,
            // searchOption: {
            //   options: {
            //     type: DateType.DATERANGE
            //   }
            // },
            prop: 'artTime'
          }, {
            label: '链接修改时间',
            type: ColumnType.DATETIME,
            searchable: true,
            sortable: true,
            hiddenInForm: true,
            // searchOption: {
            //   options: {
            //     type: DateType.DATERANGE
            //   }
            // },
            prop: 'linkGmtModified'
          },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            searchable: true,
            hiddenInForm: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['permission'])
  },
  watch: {
    '$route.query'() {
      this.loadTable()
    }
  },
  mounted() {
    this.loadTable()
  },
  methods: {
    handleSameSpuCount({ arg }) {
      this.currentRow = arg
      this.sameSpuCountDialogShowed = true
      this.$nextTick(() => {
        this.$refs.table2.reloadTable()
      })
    },
    handleBatchVideoPick({ $service }) {
      if (!$service.hasSelectOne) {
        $service.error('请选择至少一条记录')
        return
      }
      this.$confirm('确定领取所选视频吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          newProductRegisterApi.batchArtVideoHandled($service.selectedIds).then(() => {
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
            this.$refs.table.reloadTable()
          })
        })
        .catch(() => {
        })
    },
    loadTable() {
      if (this.$route.query.id) {
        this.$refs.table
          .setFilterParam('id', this.$route.query.id)
          .setFilterParam('storeId', '')
          .setFilterParam('gmtCreate', '')
      }
      this.$refs.table.reloadTable()
    },
    handleChosen({ arg }) {
      this.formData = { ...arg }
      this.chosenDialogShowed = true
    },
    handleTitle({ arg }) {
      this.formData = { ...arg }
      this.titleDialogShowed = true
    },
    handleModifyTitle({ arg }) {
      this.formData = { ...arg }
      this.modifyTitleDialogShowed = true
    },
    handleArtHandled({ arg }) {
      this.$confirm('确定领取吗?', '提示').then(() => {
        newProductRegisterApi.artHandled(arg.id).then(() => {
          arg.artHandled = 1
          this.$$notify('领取成功')
        })
      })
    },
    handleCancelArtHandled({ arg }) {
      this.$confirm('确定取消领取吗?', '提示').then(() => {
        newProductRegisterApi.cancelArtHandled(arg.id).then(() => {
          arg.artHandled = 0
          this.$$notify('取消成功')
        })
      })
    },
    handleArtVideoHandled({ arg }) {
      this.$confirm('确定领取吗?', '提示').then(() => {
        newProductRegisterApi.artVideoHandled(arg.id).then(() => {
          arg.videoPickFlag = 1
          this.$$notify('领取成功')
        })
      })
    },
    handleCancelArtVideoHandled({ arg }) {
      this.$confirm('确定取消领取吗?', '提示').then(() => {
        newProductRegisterApi.cancelArtVideoHandled(arg.id).then(() => {
          arg.videoPickFlag = 0
          this.$$notify('取消成功')
        })
      })
    },
    async handleSubmitChosen({ done }) {
      try {
        await newProductRegisterApi.chosen(this.formData)
        this.$refs.table.reloadTable()
        this.chosenDialogShowed = false
      } finally {
        done()
      }
    },
    async handleSubmitTitle({ done }) {
      try {
        await newProductRegisterApi.updateTitle(this.formData)
        this.$refs.table.reloadTable()
        this.titleDialogShowed = false
      } finally {
        done()
      }
    },
    async handleSubmitModifyTitle({ done }) {
      try {
        await newProductRegisterApi.modifyTitle(this.formData)
        this.$refs.table.reloadTable()
        this.modifyTitleDialogShowed = false
      } finally {
        done()
      }
    }
  }
}
</script>

